<!--
 * @Author: lirl
 * @Date: 2022-07-18 10:15:53
 * @Description: 登录页面
-->
<template>
  <div class="login-wrap">
    <div class="ms-login">
      <div class="ms-title">
        <img src="@/assets/images/logo.png" alt="" />
        <span>{{ title }}</span>
      </div>
      <div class="ms-content">
        <div class="login-title">用户登录</div>
        <el-form ref="loginForm" :model="userInfo" :rules="rules">
          <el-row>
            <el-col :span="24">
              <el-form-item prop="username">
                <el-input
                    class="ms-input"
                    placeholder="请输入用户名"
                    prefix-icon="el-icon-user"
                    v-model="userInfo.username">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="password">
                <el-input
                    class="ms-input"
                    type="password"
                    placeholder="请输入密码"
                    prefix-icon="el-icon-lock"
                    v-model="userInfo.password">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm" :loading="loading">登录</el-button>
        </div>
      </div>
    </div>
  </div>
  <!-- end: 登录页面模块 -->
</template>
<script>
import { UserBaseService } from 'jdf-jssdk';
import { validateForm, encryptUtil, getLoginUserInfo } from 'jdf-util';
import store from '@/vuex/store';
import LoginService from '@/api/domains/LoginService';
import { bizServiceURL, webTitle } from '@/api/utils/constants';
import { showErrorMsg } from '@/api/utils/pc-message';
import { head } from 'lodash-es';
import {
  saveUserInfo,
  setBffToken,
  setToken
} from '@/api/utils/storage-util';

export default {
  name: 'Login',
  data() {
    return {
      userInfo: {},
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      title: webTitle,
      loading: false,
      service: new LoginService(),
    };
  },
  methods: {
    // 提交前判断用户名、密码不能为空
    async submitForm() {
      await validateForm(this.$refs.loginForm);
      // 请求后台认证接口服务获取系统的token信息
      try {
        this.loading = true;
        // 調用业务登录接口
        const { userInfo: { username, password } } = this;
        const {
          data: {
            data: {
              accessToken,
              userInfo: {
                identities
              },
            },
          }
        } = await this.service.login({
          userName: username,
          password: encryptUtil(password),
        });
        setBffToken(accessToken);
        setToken(accessToken);
        const userInfo = await getLoginUserInfo(null, () => new UserBaseService(bizServiceURL).getFullInfoByToken());
        saveUserInfo(userInfo);
        saveUserInfo({ region: head(identities)?.region });
        store.commit('user/setUser', userInfo);
        // this.$router.push('/');
        this.$router.push('/').catch(() => {});
      } catch (error) {
        showErrorMsg(error);
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>
<style scoped lang="scss">
@import '@/assets/style/variables.scss';

.login-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background-size: 100%;
  background-image: url('@/assets/images/login.png');
  display: flex;
  align-items: center;
  justify-content: center;
  .ms-login {
    width: 400px;
    overflow: hidden;
    background: #fff;
    padding: 20px;
  }
  .ms-title {
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    background-image:-webkit-linear-gradient(right,#00a0f1,#00c6df,#00e6d0);
    background-clip:text;
    -webkit-text-fill-color:transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #ccc;
    img {
      width: 40px;
    }
  }
  .ms-content {
    padding: 20px;
    .login-title {
      margin: 10px 0 30px 0;
      font-size: 16px;
      text-align: center;
      color: $main-color;
      letter-spacing: 1em;
    }
  }
}

.login-btn .el-button {
  width: 100%;
  height: 36px;
  margin-bottom: 15px;
  margin-top: 15px;
  text-align: center;
}
.ms-input {
  :deep(.el-input__inner ) {
    border-color: $main-color!important;
    color: $main-color;
  }
}
</style>
